<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>晓明研究室数据采集及监控系统</title>
</head>
<body>
<head>
<title>Basic Tabs - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
	href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
<script src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
<script
	src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script
	src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
<script src='js/ichart.1.1.min.js'></script>
<script src='js/chart.js'></script>
<!-- jquery代码 -->
<script type="text/javascript">
	
	$(document).ready(function() {
		dataflow = [];
		labflow = [];
		timeflow = [];
		chartdata = null;
		$('#tt').tree({
			onClick : function(node) {
				dataflow = [];
				labflow = [];
				timeflow = [];
				$.ajax({
					type : "POST",
					url : "DatainfoGetForChart",
					data : "nodeId="+node.id,
					dataType : "json",
					success: function(jdata){
						for(var i=0;i<40;i++){
							dataflow.push(jdata[i].value);				
						} 
						for(var i=0;i<40;i++){
							timeflow.push(jdata[i].time);				
						} 
						for(var i=0;i<5;i++){
							labflow.push(jdata[i*8].time);				
						}
						labflow.push(jdata[39].time);
					    loadChart();
					    
					}
				});
			}
		});
	});
</script>
</head>
<body>
	<h2 style="font-size: 24px; text-align: center">晓明研究室数据采集及监控系统</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>UI测试中。。。。</div>
	</div>
	<button type="button">Click me</button>
	<div style="margin: 10px 0;"></div>
	<div id="layoutbody" align="center">
		<div class="easyui-layout" style="width: 1200px; height: 800px;">

			<!-- 西方布局 -->
			<div data-options="region:'west',split:true,title:'设备信息'"
				style="width: 100px;">
				<!-- 树形结构 -->
				<ul id="tt" class="easyui-tree"
					data-options="url:'WebTreeJson'"></ul>
			</div>

			<!-- 东方布局 -->
			<div data-options="region:'east',split:true,title:'数据项'"
				style="width: 200px;">
				<!-- 表格 -->
				<table class="easyui-datagrid" 
					style="width: 700px;"
					data-options="singleSelect:true,collapsible:true,url:'WebTableJson?DAQ_Id=1'">
					<thead>
						<tr>
							<th data-options="field:'Name',width:80">数据源</th>
							<th data-options="field:'Value',width:80">数值</th>
						</tr>
					</thead>
				</table>
			</div>

			<!-- 中原布局 -->
			<div data-options="region:'center',title:'主面板',iconCls:'icon-ok'"
				style="padding: 1px">
				<!-- 选项卡 -->
				<div class="easyui-tabs"
					style="width: 900px; height: auto, text-align:center; margin-left: auto; margin-right: auto;">
					<div title="数据图表" style="padding: 10px">
						<div id='canvasDiv' align="center">请选择通道</div>
					</div>
					<div title="远程控制" style="padding: 10px">
						<ul class="easyui-tree"
							data-options="url:'',animate:true"></ul>
					</div>
					<div title="帮助" data-options="iconCls:'icon-help',closable:true"
						style="padding: 10px">这是帮助内容.</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>
